<template>
    <view class="content">
        <view class="title text-lg">运输信息</view>
        <view class="box text-noraml">
            <view class="item">
                <view>运输方式</view>
                <view class="item-r" @click="open(1)">
                    <input type="text" v-model="ship" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15" v-if="type == 1"></u-icon>
                </view>
            </view>
			
			<template v-if="type == 1 || (type == 2 && company)">
				<view class="item" v-if="shipId == 2">
				    <view>运输公司</view>
				    <view class="item-r" @click="open(2)">
				        <input type="text" v-model="company" placeholder="请选择" class="inp" disabled>
				        <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
				    </view>
				    <!-- <view class="item-r" v-else>
				        <input type="text" v-model="company" placeholder="请输入" class="inp" :disabled="disabled">
				    </view> -->
				</view>
			</template>
            
            <view class="item">
                <view>启运时间</view>
                <view class="item-r" @click="open(3)">
                    <input type="text" v-model="starTime" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15" v-if="type == 1"></u-icon>
                </view>
            </view>
            <view class="item">
                <view>运输时限</view>
                <view class="item-r">
                    <input type="number" v-model="time" placeholder="请输入" class="inp" :disabled="disabled">
                </view>
            </view>
			
            <view class="item" v-if="(type == 1 && shipId != 3) || (type == 2 && carNum)">
                <view>车牌号</view>
                <view class="item-r" @click="open(4)">
                    <input type="text" v-model="carNum" :placeholder="shipId == 1 ? '请选择' : '自动匹配'" class="inp" disabled>
					<u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15" v-if="type == 1 && shipId == 1"></u-icon>
                </view>
            </view>
            <view class="item" v-if="(type == 1 && shipId != 3) || (type == 2 && name)">
                <view>司机姓名</view>
                <view class="item-r" @click="open(5)">
                    <input type="text" v-model="name" :placeholder="shipId == 1 ? '请选择' : '自动匹配'" class="inp" disabled>
					<u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15" v-if="type == 1 && shipId == 1"></u-icon>
                </view>
            </view>
            <view class="item" v-if="(type == 1 && shipId != 3) || (type == 2 && tel)">
                <view>司机手机号</view>
                <view class="item-r">
                    <input type="number" v-model="tel" placeholder="自动匹配" class="inp" disabled>
                </view>
            </view>
            <view class="item" v-if="(type == 1 && shipId != 3) || (type == 2 && idcard)">
                <view>驾驶证号</view>
                <view class="item-r">
                    <input type="idcard" v-model="idcard" placeholder="自动匹配" class="inp" disabled>
                </view>
            </view>
        </view>
        
        <view class="title text-lg">出库信息</view>
        <view class="wrapper">
            <view class="drug text-df text-gray">
                <view>订单号：{{data.belong}}</view>
                <view class="u-p-t-15">下单时间：{{data.belong_time}}</view>
                <view class="u-p-t-15">{{ data.type == 1 ? '购货企业' : '供货单位' }}：{{data.shop}}</view>
                <view class="u-p-t-15">{{ data.type == 1 ? '采购人员' : '销售人员' }}：{{data.buyer}}</view>
                <view class="u-p-t-15" v-if="data.put_address">收货地址：{{data.put_address}}</view>
                <view class="u-p-t-15" v-if="data.receiver">收货人员：{{data.receiver}}</view>
                <view class="u-p-t-15">是否冷链：{{ data.is_freeze == 1 ? '是' : '否' }}</view>
                <view class="place text-df text-gray">
                    <view class="u-p-t-15">领单人：{{data.draw_member}}</view>
                    <view class="u-p-t-15">领单时间：{{data.draw_time}}</view>
                    
                    <view class="u-p-t-15">出库人：{{ data.out_member }}</view>
                    <view class="u-p-t-15">出库时间：{{ data.out_time }}</view>
                    
                    <view class="u-p-t-15">复核人：{{data.member}}</view>
                    <view class="u-p-t-15">复核时间：{{data.create_time}}</view>
                </view>
            </view>
        </view>
        
        <view class="title text-lg">出库物品</view>
        <view class="wrapper">
            <view class="drug text-df text-gray" v-for="(item, index) in data.goods_list" :key="index">
                <view class="u-flex">
                    <view class="u-flex-1">物品名称：{{item.goods_name}}</view>
                    <!-- <view class="drug-state1">已出库</view> -->
                    <!-- <view class="drug-state2">未出库</view> -->
                </view>
                <view class="u-p-t-15">批次号：{{item.batch}}</view>
                <view class="u-p-t-15">规格：{{item.goods_spec}}</view>
                <view class="u-p-t-15">有效日期：{{item.period_date}}</view>
                <view class="u-p-t-15">生产厂家：{{item.factory}}</view>
                <view class="u-p-t-15">供货厂家：{{item.supplier}}</view>
                <view class="u-p-t-15" v-if="item.stock_nums">库存量：{{item.stock_nums}}</view>
                <view class="u-p-t-15" v-if="item.buy_nums">订单数量：{{item.buy_nums}}</view>
                <view class="u-p-t-15" v-if="item.goods_nums">出库数量：{{item.goods_nums}}</view>
                <view class="u-p-t-15" v-if="item.sale_price">单价（元）：￥{{item.sale_price}}</view>
                <view class="u-p-t-15" v-if="item.goods_amount">总价（元）：￥{{item.goods_amount}}</view>
                <view class="u-p-t-15" v-if="item.stores_house">库区：{{item.stores_house}}</view>
                <view class="u-p-t-15" v-if="item.library">货位：{{item.library}}</view>
                <view class="u-p-t-15" v-if="item.tray">托盘：{{item.tray}}</view>
            </view>
        </view>
        
        <view class="btn-square u-m-30" v-if="type == 1" @click="$noMultipleClicks(doSubmit)">确认</view>
        
        <!-- 运输方式 -->
        <u-select v-model="show_1" mode="single-column" :list="select" @confirm="confirm(1, $event)"></u-select>
        <!-- 运输公司 -->
        <u-select v-model="show_2" mode="single-column" :list="list" label-name="name" value-name="id" @confirm="confirm(2, $event)"></u-select>
        <!-- 启运时间 -->
        <u-picker v-model="show_3" mode="time" :params="timeParams" @confirm="chooseTime"></u-picker>
		<!-- 车牌号 -->
		<u-select v-model="show_4" mode="single-column" :list="carList" label-name="name" value-name="id" @confirm="confirm(4, $event)"></u-select>
		<!-- 司机姓名 -->
		<u-select v-model="show_5" mode="single-column" :list="driverList" label-name="name" value-name="id" @confirm="confirm(5, $event)"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
                show_1: false,
                show_2: false,
                show_3: false,
				show_4: false,
				show_5: false,
                timeParams: { year: true,month: true,day: true,hour: false,minute: false,second: false },
                disabled: true,
                disabled2: true,
                select: [{value: '1',label: '自运'},{value: '2',label: '委托运输'},{value: '3',label: '购货单位自提'}],
                ship: '',//运输方式
                shipId: '',
                list: [],//运输公司
                company: '',
                companyId: '',
                starTime: '',//启运时间
                time: '',//运输时限
                carNum: '',//车牌号
                name: '',//司机姓名
                tel: '',//司机手机号
                idcard: '',//驾驶证号
                type: '',
                id: '',
                data: {},
				carList: [],
				driverList: [],
            };
        },
        onLoad(option) {
            if (option.type) {
                this.type = option.type
                if (this.type == 1) {
                    this.disabled = false
                    this.disabled2 = false
                    uni.setNavigationBarTitle({
                    	title:'添加运输'
                    })
                    this.getCompany()
                }
            }
            this.id = option.id
            this.getData()
            this.getDrivers()
            this.getCars()
        },
        methods: {
            doSubmit() {
                if (!this.shipId) {
                    this.$toast('请选择运输方式')
                    return
                }
				if (this.shipId == 1) {
					if (!this.carNum) {
					    this.$toast('请选择车牌号')
					    return
					}
					if (!this.name) {
					    this.$toast('请选择司机姓名')
					    return
					}
				}
                if (this.shipId == 2) {
                    if (!this.company) {
                        this.$toast('请选择运输公司')
                        return
                    }
                } else {
                    // if (!this.$checkPhone(this.tel)) {
                    // 	this.$toast('手机号码格式不正确');
                    // 	return false;
                    // }
                    // if (!this.$testIdCard(this.idcard)) {
                    // 	this.$toast('身份证号码格式不正确');
                    // 	return false;
                    // }
                }
                if (!this.starTime) {
                    this.$toast('请选择启运时间')
                    return
                }
                if (!this.time) {
                    this.$toast('请输入运输时限')
                    return
                }
                
                this.$ajax('inventory_out/ship', {
                    userToken: this.$getSync('userToken'),
                    reply_id: this.id,//信息编号
                    shipping_type: this.shipId,//运输方式
                    departure_time: this.starTime,//启运时间
                    deadline: this.time,//在途时限
                    entrust: this.company,//承运单位
                    car_no: this.carNum,//车牌号
                    driver_name: this.name,//司机姓名
                    driver_mobile: this.tel,//司机手机号
                    driver_no: this.idcard,//驾驶证号
                }).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            open(num) {
                if (this.type == 1) {
                    if (num == 1) {
                        this.show_1 = true
                    } else if (num == 2) {
                        this.show_2 = true
                    } else if (num == 3) {
                        this.show_3 = true
                    } else if (num == 4) {
						if (this.shipId == 1) {
							this.show_4 = true
						}
                    } else if (num == 5) {
						if (this.shipId == 1) {
							this.show_5 = true
						}
                    }
                }
            },
            
            confirm(num, e) {
                console.log(e);
                if (num == 1) {
                    this.ship = e[0].label
                    this.shipId = e[0].value
                    // this.disabled2 = false
                    this.company = ''
                    this.companyId = ''
                    this.carNum = ''//车牌号
                    this.name = ''//司机姓名
                    this.tel = ''//司机手机号
                    this.idcard = ''//驾驶证号
                } else if (num == 2) {
                    this.company = e[0].label
                    this.companyId = e[0].value
                    if (this.shipId == 2) {
                        // this.disabled2 = true
                        
                        this.list.forEach(cur => {
                            if (this.companyId == cur.id) {
                                this.carNum = cur.car_no//车牌号
                                this.name = cur.contacts//司机姓名
                                this.tel = cur.mobile//司机手机号
                                this.idcard = cur.ID_card//驾驶证号
                            }
                        })
                    }
                } else if (num == 4) {
					// 车牌号
                    this.carNum = e[0].label
                } else if (num == 5) {
					// 司机姓名
                    this.name = e[0].label
					if (this.driverList && this.driverList.length > 0) {
						this.driverList.forEach(cur => {
							if (e[0].value == cur.id) {
								this.tel = cur.mobile//司机手机号
								this.idcard = cur.card_no//驾驶证号
							}
						})
					}
                }
            },
            
            //选择时间
            chooseTime(e) {
            	this.starTime = e.year + '-' + e.month + '-' + e.day;
            },
            
            getData() {
                let url = ''
                if (this.type == 1) {
                    // 待运输
                    url = 'inventory_out/double_check_detail'
                } else {
                    // 已运输
                    url = 'inventory_out/ship_detail'
                }
            	this.$ajax(url, {
                    userToken: this.$getSync('userToken'),
                    id: this.id,
                }).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
                        if (this.type == 2) {
                            this.ship = this.data.shipping_type_txt//运输方式
                            this.starTime = this.data.departure_time//启运时间
                            this.time = this.data.deadline//在途时限
                            this.company = this.data.entrust//承运单位
                            this.carNum = this.data.car_no//车牌号
                            this.name = this.data.driver_name//司机姓名
                            this.tel = this.data.driver_mobile//司机手机号
                            this.idcard = this.data.driver_no//驾驶证号
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
			
			// 获取司机
			getDrivers() {
				this.$ajax('index/get_drivers', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.driverList = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取车辆
			getCars() {
				this.$ajax('index/get_cars', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.carList = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
            // 获取运输公司
            getCompany() {
            	this.$ajax('inventory_out/get_entrust', {
                    userToken: this.$getSync('userToken'),
                }).then(ret => {
            		if (ret.status == 0) {
                        this.list = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5 !important;
    }
    .title{
        font-weight: bold;
        padding: 45rpx 50rpx 25rpx;
        position: relative;
    }
    .title::after{
        display: block;
        content: '';
        width: 8rpx;
        height: 26rpx;
        background-color: #ff4800;
        position: absolute;
        left: 25rpx;
        bottom: 32rpx;
    }
    
    
    .box{
        padding: 0 30rpx;
        background-color: #fff;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        text-align: right;
        padding-left: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .inp{
        flex: 1;
    }
    .item-img{
        padding: 30rpx 0;
    }
    .img{
        width: 316rpx;
        height: 200rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }
    
    
    .drug{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 35rpx 30rpx;
        margin-bottom: 25rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .drug:last-child{
        margin-bottom: 0;
    }
    .drug-state1{
        font-size: 24rpx;
        color: #0075ff;
        padding: 9rpx 12rpx;
        background-color: #ebf4fe;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    .drug-state2{
        font-size: 24rpx;
        color: #00c28f;
        padding: 9rpx 12rpx;
        background-color: #e9fbf6;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    
    .examine{
        word-break: break-all;
        white-space: pre-line;
        padding: 15rpx 25rpx 30rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin: 0 30rpx 25rpx;
    }
    .t-inp{
        width: 100%;
        min-height: 150rpx;
        height: auto;
        padding-top: 15rpx;
    }
    .examine2{
        padding: 15rpx 0;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-photo{
        width: 187rpx;
        height: 187rpx;
        margin-right: 15rpx;
        margin-top: 15rpx;
    }
    
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30rpx;
    }
    .refuse-btn{
        font-size: 34rpx;
        color: #757575;
        padding: 25rpx 130rpx;
        background-color: #fff;
        border: 2rpx solid #d8d8d8;
        border-radius: 10rpx;
    }
    .take-btn{
        font-size: 34rpx;
        color: #fff;
        padding: 25rpx 130rpx;
        background-color: #ff4800;
        border-radius: 10rpx;
        margin-left: 20rpx;
    }
    
    .enter-btn{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 10rpx;
    }
    .enter-btn>view{
        padding: 15rpx 50rpx;
        background-color: #8392a5;
        border-radius: 10rpx;
        color: #fff;
    }
    
    .place{
        word-break: break-all;
        white-space: pre-line;
        padding: 5rpx 20rpx 20rpx;
        background-color: #f5f6f8;
        border-radius: 10rpx;
        margin-top: 30rpx;
    }
    .wrapper{
        padding: 0 30rpx;
    }
    .choose-01{
        width: 33rpx;
        height: 33rpx;
        margin-right: 15rpx;
    }
    .time-02{
        width: 33rpx;
        height: 34rpx;
        margin-left: 15rpx;
    }

</style>
